<script setup lang='ts'>
import Button from "../../components/Button.vue";
import RightList from "../../components/RightList.vue";
import { ref } from "vue";
import Czml from "./dataBase/Czml.vue";
import GeoJson from "./dataBase/GeoJson.vue";
import Kml from "./dataBase/Kml.vue";

type plotingType = 'ESGeoJson' | 'ESKml' | 'ESCzml'
const controlList: { type: plotingType, zh: string, icon: string, leftButton: boolean }[] = [
    {
        type: 'ESGeoJson',
        zh: 'GeoJson',
        icon: 'a-GeoJSON',
        leftButton: true
    },
    {
        type: 'ESKml',
        zh: 'KML',
        icon: 'KML',
        leftButton: false


    },
    {
        type: 'ESCzml',
        zh: 'Czml',
        icon: 'Czml ',
        leftButton: true
    },
];
const type = ref('')
</script>

<template>
    <RightList :title="'数据源'" :isTop="true">
        <Button v-for="item in controlList" :name="item.icon" :content="item.zh"
            :click="() => { type === item.type ? type = '' : type = item.type }" :left-button="item.leftButton"
            :actived="type === item.type"></Button>
        <GeoJson v-if="type === 'ESGeoJson'" @close="type = ''"></GeoJson>
        <Kml v-if="type === 'ESKml'" @close="type = ''"></Kml>
        <Czml v-if="type === 'ESCzml'" @close="type = ''"></Czml>
    </RightList>
</template>
